<template>
  <div>
    <left-left style="width: 93%"/>
    <team-manage-left style="margin-left: 5%;position: absolute;top:0;width: 65%"/>
    <el-container style="position:absolute;top:0;margin-left: 18%;height: 100vh">
      <el-aside>
        <el-divider class="el-divider1" direction="vertical" style="height: 1000%"></el-divider>
      </el-aside>



      <el-main  >
        <div style="margin-left: 2%;margin-top: 4%;font-size: 20px">成员管理</div>
        <div style="margin-left: 2.2%;margin-top: 0.8%;font-size: 13px">共<span style="color: red">{{countTeam}}</span>个协作成员，共<span style="color: red">{{countVisitor}}</span>个访客</div>
        <el-input
          placeholder="搜索团队成员"
          v-model="inputSearch"
          type="text"
          @keydown.space.native="inputSearch = inputSearch + ' '"
          @keydown.enter.native="searchTeam()"
          clearable
          autofocus
          style="width: 25%;position: absolute;right: 100px;top:65px">
          <el-button slot="append" icon="el-icon-search" @click.native="searchTeam()"
                     @keydown.enter.native="searchTeam()"></el-button>
        </el-input>
        <el-divider></el-divider>
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="500">
          <el-table-column
            fixed
            prop="userRealName"
            label="用户名"
            width="150"
          >
          </el-table-column>
          <el-table-column
            fixed
            prop="userEmail"
            label="邮箱"
            width="300"
          >
          </el-table-column>
          <el-table-column
            fixed
            prop="lastLogin"
            label="最后登录"
            width="300"
          >
          </el-table-column>
          <el-table-column
            fixed
            prop="identity_str"
            label="身份"
            width="150"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <el-button type="plain" class="el-icon-more">

                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="scope.row.identity===0" @click.native="promote(scope.row.userID)">升为管理员</el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.identity===1" @click.native="demote(scope.row.userID)">取消管理员</el-dropdown-item>
                  <el-dropdown-item @click.native="deleteRow(scope.row.userID)">删除该成员</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-main>

    </el-container>


  </div>
</template>

<script>
import leftLeft from '@/components/left/leftLeft.vue'
import teamManageLeft from "@/components/left/teamManageLeft";
export default {
  name: 'teammateManagement',
  components: {
    leftLeft,
    teamManageLeft
  },
  data(){
    return{
      countTeam:"4",
      countVisitor:"0",
      inputSearch:"",
      tableData:[

      ]
    }
  },
  created() {
    this.$store.state.teamID=JSON.parse(localStorage.getItem("insuranceTeamCode"));
    this.$store.state.ID=JSON.parse(localStorage.getItem("insuranceUserCode"));
    this.getInfo()

  },
  methods:{
    getInfo(){
      const formData=new FormData();
      formData.append("userID",this.$store.state.ID)
      formData.append("teamID",this.$store.state.teamID)

      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/team/member',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: formData
      })
        .then(res => {              /* res 是 response 的缩写 */
          this.tableData = res.data.data
        })
        .catch(err => {
          /* 若出现异常则在终端输出相关信息 */
        })
    },
    searchTeam(){

    },
    deleteRow(key){
      const formData=new FormData();
      formData.append("userID",this.$store.state.ID)
      formData.append("teamID",this.$store.state.teamID)
      formData.append("targetUserID",key)

      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/team/kick',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: formData
      })
        .then(res => {              /* res 是 response 的缩写 */

          if(res.data.errno===1100){
            this.$alert('无权踢出其他成员', '哦哦~', {
              confirmButtonText: '确定',

            });
            return;
          }
          else{
            localStorage.setItem("insuranceTeamCode", JSON.stringify(this.$store.state.teamID));
            localStorage.setItem("insuranceUserCode", JSON.stringify(this.$store.state.ID));
            this.$router.go(0);
          }
        })
        .catch(err => {
          /* 若出现异常则在终端输出相关信息 */
        })

    },
    promote(key){

      const formData=new FormData();
      formData.append("userID",this.$store.state.ID)
      formData.append("teamID",this.$store.state.teamID)
      formData.append("targetUserID",key)
      formData.append("targetUserStatus","1")
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/team/modify',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: formData
      })
        .then(res => {              /* res 是 response 的缩写 */

          if(res.data.errno===1100){
            this.$alert('无权限修改其他成员的身份', '哦哦~', {
              confirmButtonText: '确定',
            });
            return;
          }
          else{
            localStorage.setItem("insuranceTeamCode", JSON.stringify(this.$store.state.teamID));
            localStorage.setItem("insuranceUserCode", JSON.stringify(this.$store.state.ID));
            this.$router.go(0);

          }
        })
        .catch(err => {
          /* 若出现异常则在终端输出相关信息 */
        })
      localStorage.setItem("insuranceTeamCode", JSON.stringify(this.$store.state.teamID));
      localStorage.setItem("insuranceUserCode", JSON.stringify(this.$store.state.ID));
      this.$router.go(0);
    },
    demote(key){

      const formData=new FormData();
      formData.append("userID",this.$store.state.ID)
      formData.append("teamID",this.$store.state.teamID)
      formData.append("targetUserID",key)
      formData.append("targetUserStatus","0")
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/team/modify',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: formData
      })
        .then(res => {              /* res 是 response 的缩写 */

          if(res.data.errno===1100){
            this.$alert('无权限修改其他成员的身份', '哦哦~', {
              confirmButtonText: '确定',
            });
            return;
          }
          else{
            localStorage.setItem("insuranceTeamCode", JSON.stringify(this.$store.state.teamID));
            localStorage.setItem("insuranceUserCode", JSON.stringify(this.$store.state.ID));
            this.$router.go(0);
          }
        })
        .catch(err => {
          /* 若出现异常则在终端输出相关信息 */
        })

    }
  }
}
</script>

<style scoped>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-divider1{
  height: 100vh;
}
.el-main{
  margin-left: -23.3%;
  width: 950px;
}
.el-button {
  border-right:0!important;
  border-left:0!important;
  border-top:0!important;
  border-bottom:0!important;
}
</style>
